<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单列表</title>
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/layer/skin/layer.css">
    <style type="text/css">
        .ttd {width: 250px;text-align: center;}
        .ttb {width: 80px;text-align: center;}
        .sort_span {display: block;width: 80px;}
        .sort_txt {display: none;width: 80px;height: 18px;outline: none;border: 1px solid #1ab394;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <form action="/menu/lists" method="get">
                        <table style="width: 100%;padding: 0;border: none">
                            <tr>
                                <td class="ttd">
                                    <input type="text" name="keyword" placeholder="菜单名称" class="input-sm form-control" value="{$param.keyword}">
                                </td>
                                <td class="ttd">
                                    <input type="text" name="identity" placeholder="菜单标识" class="input-sm form-control" value="{$param.identity}">
                                </td>
                                <td class="ttd">
                                    <select class="form-control" name="modular">
                                        <option value="">…所属模块…</option>
                                        {foreach $modular as $r}
                                        <option value="{$r.id}" {if($param.modular===$r.id)}selected="1"{/if}>{$r.title}</option>
                                        {/foreach}
                                    </select>
                                </td>
                                <td class="ttb"><input type="submit" class="btn btn-sm btn-primary" value="搜索"></td>
                                <td>
                                    <a href="javascript:;" id="add" class="btn btn-sm btn-success">添加</a>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="ibox-content">
                    <table id="treeTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/hplus/js/jquery.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/layer/layer.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/royui/royui.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript">
    $(function () {
        let $data = JSON.parse('<?php echo json_encode($list); ?>')
        let $r = new royui()
        $r.treeTable({
            elem: '#treeTable',
            data: $data,
            //url: '/menu/lists',
            paging: true,
            first_page: true,
            prev_page: true,
            next_page: true,
            count: {$count},
            pages: {$pages},
            cols: [
                {
                    field: 'identity',
                    title: '标识'
                },
                {
                    field: 'title',
                    title: '名称'
                },
                {
                    field: 'url',
                    title: '链接'
                },
                {
                    title: '左侧显示',
                    template: function ($item) {
                        if (parseInt($item.is_hide) === 1) {
                            return '否'
                        } else {
                            return '是'
                        }
                    }
                },
                {
                    title: '排序',
                    template: function ($item) {
                        return '<span class="sort_span">' + $item.sort + '</span><input type="text" class="sort_txt" value="' + $item.sort + '" data-id="' + $item.id + '">'
                    }
                },
                {
                    title: '操作',
                    action: [{
                        matter: 'edit',
                        url: '/menu/edit',
                        area: ['600px', '700px'],
                        method: 'popup'
                    }, {matter: 'del', url: '/menu/del'}]
                }
            ]
        })
        // 添加菜单
        $('#add').click(function () {
            layer.open({
                type: 2,
                title: '添加菜单',
                content: '/menu/add',
                area: ['600px', '700px'],
                closeBtn: 2,
                btn: ['确定', '取消'],
                yes: function ($index, $layero) {
                    let $body = $layero.find('iframe').contents().find('body');
                    let $param = decodeURIComponent($($body).find('form').serialize());
                    $param = $param.split('&');
                    let $params = {};
                    $($param).each(function ($n, $obj) {
                        $params[$obj.split('=')[0]] = $obj.split('=')[1];
                    });
                    if (!$params.identity) {
                        layer.msg('标识不能为空', {icon: 5, time: 1000});
                        return false;
                    }
                    if (!$params.title) {
                        layer.msg('菜单名称不能为空', {icon: 5, time: 1000});
                        return false;
                    }
                    if (!$params.is_hide) {
                        layer.msg('请选择是否在左则显示', {icon: 5, time: 1000});
                        return false;
                    }
                    $.ajax({
                        type: 'post', dataType: 'json', cache: false,
                        url: '/menu/add',
                        data: $params,
                        success: function ($data) {
                            if ($data.code === 200) {
                                layer.msg($data.message, {icon: 1, time: 1200}, function () {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg($data.message, {icon: 5});
                            }
                        }
                    })
                }
            })
        })
        let $body = $('body')
        $body.on('click', '.sort_span', function () {
            $(this).css('display', 'none').next('.sort_txt').css('display', 'block').select()
        })
        $body.on('blur', '.sort_txt', function () {
            let $this = $(this);
            if ($this.val() === $this.prev('.sort_span').html()) {
                $this.css('display', 'none');
                $this.prev('.sort_span').css('display', 'block');
                return false
            }
            $.ajax({
                type: 'post', dataType: 'json', cache: false,
                url: '/menu/operatesort',
                data: {'id': $this.data('id'), 'sort': $this.val()},
                success: function ($data) {
                    if ($data.code === 200) {
                        layer.msg($data.message, {icon: 6, time: 1000}, function () {
                            $this.prev('.sort_span').css('display', 'block').html($this.val());
                            $this.css('display', 'none');
                        });
                    } else {
                        layer.msg($data.message, {icon: 5, time: 1000})
                    }
                }
            })
        }).on('keydown', '.sort_txt', function (e) {
            if (e.keyCode === 13) {
                $(this).blur()
            }
        })
    });
</script>
</html>
